<template>
  <van-swipe-cell>
    <div class="item">
      <div :style="{backgroundColor: todoItem.style}" class="label"></div>
      <div class="l">
        <svg :style="{fill: todoItem.style}" t="1622098745308" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3816" width="200" height="200"><path d="M523.1 171.7c-211.6 0-383 175.8-383 392.8 0 98.5 35.4 188.4 93.8 257.3l-89.6 112.6 26.9 22.6L258 847.9c68.8 67.7 162.1 109.3 265 109.3 103.2 0 196.7-41.9 265.6-109.9l86.8 109.8 27.1-22.5-89.7-113.5c58.1-68.9 93.3-158.5 93.3-256.7 0-216.9-171.5-392.7-383-392.7z m0 749.8c-192 0-348.2-160.1-348.2-357s156.2-357.1 348.2-357.1 348.2 160.2 348.2 357.1-156.2 357-348.2 357zM348 64.6H244.5c-96.2 0-174.1 79.9-174.1 178.5v107.4H120l228-235.2V64.6z m-34.8 36L105.5 314.8h-0.2v-71.7c0-78.8 62.5-142.8 139.3-142.8h68.6v0.3zM801.2 64.6H697.7v50.8l228.1 235.2h49.5V243.1c0-98.6-78-178.5-174.1-178.5z m139.3 250.2h-0.2L732.5 100.6v-0.3h68.7c76.8 0 139.3 64.1 139.3 142.8v71.7z" p-id="3817"></path><path d="M523.1 564.4H331.2v35.8h226.7V278.8h-34.8z" p-id="3818"></path></svg>
        <p :style="{color: todoItem.style}">{{moment.unix(todoItem.due).format('hh:mm a')}}</p>
      </div>
      <div class="r">
        <p class="title">{{todoItem.content}}</p>
        <p class="desc">一句鸡汤，咸到你发齁。</p>
      </div>
    </div>
    <template #right>
      <van-button @click="doneItem(todoItem.id)" square icon="success" type="primary" plus class="delete-button" />
      <van-button @click="deleteItem(todoItem.id)" square icon="delete-o" type="danger" class="delete-button" />
    </template>
  </van-swipe-cell>
</template>

<script>
import { Toast } from 'vant';

export default {
  name: 'TodoItem',
  props: {
    todoItem: Object,
  },
  methods:{
    /**
     * 完成该待办事项
     */
    doneItem(id){
      this.$api.todoapi.done(id).then(res=>{
        Toast('该事项已完成');
        this.$emit('refresh');
      })
    },
    /**
     * 删除该待办事项
     */
    deleteItem(id){
      this.$api.todoapi.delete(id).then(res=>{
        Toast('该事项已删除');
        this.$emit('refresh');
      })
    }
  }
}
</script>

<style scoped>
.delete-button{
  height: 90px;
}
.done-button{
  height: 90px;
}
.item {
  height: 90px; width: 100%; position: relative;
  margin-top: 10px; box-shadow: 0px 1px 20px #ddd;
}
.item > div{
  border: 0px solid black;
}
.item .label{
  height: 90px; background-color: red;
  width: 20px; border-radius: 20px;
  position: absolute; left: 10px; top: 0;
  z-index: 1;
}
.item .l{
  width: 100px; height: 90px; background-color: white;
  position: absolute; left: 20px; top: 0; z-index: 2;
}
.item .l .icon{
  width: 30px; height: 30px; fill: red;
  margin: 0px auto; margin-top: 15px; display: block;
}
.item .l p{
  text-align: center; font-size: 18px;
  margin-top: 10px; width: 100%;
}
.item .r{
  background-color: white;
  position: absolute; z-index: 2;
  padding-left: 10px; left: 120px; top: 0; right: 0;
  height: 90px;
}
.item .r .title{
  height: 60px; line-height: 60px; width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}
.item .r .desc{
  font-size: 0.8em; color: #888; width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}
</style>